import React, { memo, useEffect, useRef } from 'react'
import { HeaderWrapper } from './style'
import NavBar from '@/components/b_navbar'
import { Avatar } from 'antd'
import initCanvas from '@/utils/home_bg_canvas'
import { shallowEqual, useSelector } from 'react-redux'

export default memo(function B_Header(props) {
  const { userId } = props
  const canvasRef = useRef()

  useEffect(() => {
    canvasRef.current && initCanvas(canvasRef.current)
  }, [])

  const { userProfile = {} } = useSelector(
    (state) => ({
      userProfile: state.blogReducer.getIn(['userProfile'])
    }),
    shallowEqual
  )

  const { user = {} } = userProfile

  return (
    <HeaderWrapper className="wrap-v0">
      {/* 头部 */}
      <header className="wrap-v0 relative">
        {/* 导航 */}
        <NavBar userId={userId} />
        {/* 大屏图 */}
        <div className="wall relative">
          {/*<img src={(walls && walls.length > 0) ? walls[0].wall : wall} alt=""/>*/}
          <img
            src="https://upload-images.jianshu.io/upload_images/20040970-e90f40f0617bb932.jpg"
            alt=""
          />
          <div className="home-avatar absolute text-center">
            <Avatar
              src={
                user.avatarUrl ||
                'https://upload-images.jianshu.io/upload_images/20040970-c7e0d9ab8afc68f8.jpg'
              }
              className="avatar-img"
              shape="circle"
            />
          </div>
        </div>
        {/* 信条 */}
        <p className="text-center creed">{user.creed || ''}</p>
      </header>
      {/* 背景 */}
      <canvas className="home-bg-canvas" ref={canvasRef}></canvas>
    </HeaderWrapper>
  )
})
